
import { Button, CloseButton, Dialog, Portal, Link, Box } from "@chakra-ui/react"
import { Highlight, themes } from "prism-react-renderer"

// Simple LogCodeDisplay component definition
function LogCodeDisplay({ code, language }: { code: string; language: string }) {
    return (
        <Box as="pre" p={4} bg="gray.800" color="white" borderRadius="md" overflowX="auto">
            <Highlight code={code} language={language} theme={themes.vsDark}>
                {({ className, style, tokens, getLineProps, getTokenProps }) => (
                    <pre className={className} style={style}>
                        {tokens.map((line, i) => (
                            <div key={i} {...getLineProps({ line, key: i })}>
                                {line.map((token, key) => (
                                    <span key={key} {...getTokenProps({ token, key })} />
                                ))}
                            </div>
                        ))}
                    </pre>
                )}
            </Highlight>
        </Box>
    );
}




export default function LogDisplayDialog({ item }: { item: { name: string, log: string } }) {
    return (
        <Dialog.Root size="xl">
            <Dialog.Trigger asChild>
                <Link colorPalette="blue">查看</Link>
            </Dialog.Trigger>
            <Portal>
                <Dialog.Backdrop />
                <Dialog.Positioner>
                    <Dialog.Content>
                        <Dialog.Header>
                            <Dialog.Title>{item.name}</Dialog.Title>
                        </Dialog.Header>
                        <Dialog.Body>
                            <LogCodeDisplay code={item.log} language={'log'} />
                        </Dialog.Body>
                        
                        <Dialog.CloseTrigger asChild>
                            <CloseButton size="sm" />
                        </Dialog.CloseTrigger>
                    </Dialog.Content>
                </Dialog.Positioner>
            </Portal>
        </Dialog.Root>
    )
}
